import Phaser from 'phaser'
import { Align } from './classes/util/align'
// eslint-disable-next-line no-unused-vars
const _w = document.getElementById('app').getBoundingClientRect().width
// eslint-disable-next-line no-unused-vars
const _h = document.getElementById('app').getBoundingClientRect().height

export class SceneMainTest extends Phaser.Scene {
  constructor () {
    super('SceneMainTest')
  }

  preload () {
    // 加载图片资源并命名
    this.load.image('face', require('./../assets/img/face.png'))

    // 加载雪碧图
    // this.load.spritesheet('boy', require('./../assets/img/boy.png'), { frameWidth: 120, frameHeight: 200 })

    // 加载音频文件
    this.load.audio('cat', [require('./../assets/audio/meow.mp3'), require('./../assets/audio/meow.ogg')])
  }

  create () {
    const face = this.add.image(0, 0, 'face')
    Align.center(face)

    // 添加图片至舞台
    // this.face = this.add.image(0, 0, 'face')
    // this.face.alpha = 0.5 // 设置透明度
    // this.face.angle = 45 // 设置角度
    // this.face.scaleX = 2 // 设置X轴缩放
    // this.face.scaleY = 2 // 设置Y轴缩放
    // this.face.displayWidth = 500 // 设置宽度
    // this.face.displayHeight = 500 // 设置高度
    // this.face.scaleY = this.face.scaleX // 设置高度和宽度同样大小
    // this.face.setOrigin(0, 0) // 设置锚点 0-1
    // this.face.x = 200 // 设置X轴的位置
    // this.face.y = 200 // 设置Y轴的位置

    // 添加雪碧图的动画到舞台
    // this.boy = this.add.sprite(0, 0, 'boy')
    // this.boy.setOrigin(0.5, 0.5)
    // 从精灵表生成帧号 不需要自己一帧一帧的写
    // const frameNames = this.anims.generateFrameNumbers('boy')
    // this.anims.create({
    //   key: 'walk',
    // frames: [
    //   { key: 'boy', frame: 0 },
    //   { key: 'boy', frame: 1 },
    //   { key: 'boy', frame: 2 },
    //   { key: 'boy', frame: 3 },
    //   { key: 'boy', frame: 4 },
    //   { key: 'boy', frame: 5 },
    //   { key: 'boy', frame: 6 }
    // ],
    // frames: frameNames,
    // frameRate: 10, // 动画的速度
    // repeat: -1 // 循环多少次  -1为循环
    // })
    // this.boy.play('walk')
    // this.doWalk()

    // 添加文字到舞台
    // this.text1 = this.add.text(_w / 2, _h / 2, '战场上征伐数年', { fontFamily: 'Anton', color: '#f00' })
    // this.text1.setOrigin(0.5, 0.5)

    // this.face = this.add.image(_w / 2, _h / 2, 'face')
    // 添加点击事件
    // this.face.setInteractive()
    // this.face.on('pointerdown', this.onDown, this)
    // this.face.on('pointerup', this.onUp, this)

    // 线条
    // this.graphics = this.add.graphics()
    // this.graphics.lineStyle(8, 0xff0000)
    // 画直线
    // this.graphics.moveTo(100, 0)
    // this.graphics.lineTo(100, 300)
    // this.graphics.strokePath()
    // 画长方形
    // this.graphics.strokeRect(100, 100, 50, 50)
    // 画空心圆形
    // this.graphics.strokeCircle(200, 200, 100)
    // 实心圆抱一个边框
    // this.graphics.strokeCircle(200, 200, 60)
    // 画实心圆
    // this.graphics.fillStyle(0x00ff00, 0.5)
    // this.graphics.fillCircle(200, 200, 60)

    this.catSound = this.sound.add('cat')
    this.catSound.play()
  }

  // onDown () {
  //   this.face.alpha = 0.5
  // }

  // onUp () {
  //   this.face.alpha = 1
  // }

  // update () {
  // this.boy.x += 2 // 设置boy在X方向的移动
  // if (this.boy.x > _w) {
  //   this.boy.x = 0
  // }
  // }

  // doWalk () {
  // this.tweens.add({
  //   targets: this.boy,
  //   duration: 10000,
  //   x: _w,
  //   y: _h,
  //   onComplete: this.onCompleteHandle.bind(this)
  // })
  // }

  // onCompleteHandle (tween, targets, custom) {
  //   const boy = targets[0]
  //   boy.x = 0
  //   boy.y = 0
  //   this.doWalk()
  // }
}
